<template>
  <div class="menu">
    <PageContent
      :contentTableConfig="contentTableConfig"
      pageName="menu"
      @newBtnClick="handleNewData"
      @editBtnClick="handleEditData"
      createName="新建菜单"
    ></PageContent>
    <!-- 新建 -->
    <pageModal :modalConfig="modalConfig" ref="pageModalRef"></pageModal>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue'
import pageModal from '@/components/page-modal'
import PageContent from '@/components/page-content'
import { modalConfig } from './config/modal.config'
import { contentTableConfig } from './config/content.config'

export default defineComponent({
  name: 'hy-menu',
  components: {
    PageContent,
    pageModal
  },
  setup() {
    const pageModalRef = ref()
    const handleNewData = () => {
      pageModalRef.value.dialogVisible = true
    }
    return {
      contentTableConfig,
      modalConfig,
      handleNewData,
      pageModalRef
    }
  }
})
</script>

<style scoped></style>
